<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="12" :sm="8">
            <a-form-item label="发布时间">
              <a-range-picker
                style="width:100%"
                format="YYYY-MM-DD"
                :placeholder="['开始时间', '结束时间']"
                @change="datePickerChange"
                ref="rangePickerFocus"
                v-model="datepickerApplyDate"/>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="标题">
              <a-input placeholder="请输入标题" v-model="params.title"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">条件清除</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>


      <a-row :gutter="48" style="padding:10px;font-weight:bold;background-color: #f5f5f5;border-bottom: 1px solid #d9d9d9;">
        <a-col :span="16">标题</a-col>
        <a-col :span="3">创建人</a-col>
        <a-col :span="5">发布时间</a-col>
      </a-row>

      <a-row :gutter="48" >
      <a-list
        size="default"
        :pagination="pagination"
        :dataSource="listData"
        :loading="spinLoading"
      >
      
        <a-list-item slot="renderItem" slot-scope="item, index" v-if="item.type!='file'" @click="showDetail(item)" >
          <a-col :span="16" style="padding:5px 0px">
            <span>
            <!-- <a-list-item-meta :description="item.content | contentFilter" > -->
              <a slot="title" href="#">{{item.title}}</a>
              <!-- <img slot="avatar" :src="getAvatarView(item.imageHref)" style="width:200px;height:110px;"/> -->
            <!-- </a-list-item-meta> -->
            </span>
          </a-col>
          <a-col :span="3" >{{item.author}}</a-col>
          <a-col :span="5" >{{item.publishDate}}</a-col>
        </a-list-item>
        <a-list-item slot="renderItem" slot-scope="item, index" @click="showDetail(item)"  v-else>
          <a-col :span="16"  style="padding:5px 0px">
            <a >
              {{item.title}}
              <!-- <img v-if="item.imageHref" slot="avatar" :src="getAvatarView(item.imageHref)" style="width:150px;height:80px;border-radius: 10px;margin-right: 10px;"/> -->
              <!-- <a slot="title" :href="getFileDownloadUrl(item.fileUrl)" target="_blank">{{item.title}}</a> -->
            </a>
          </a-col>
          <a-col :span="3">{{item.author}}</a-col>
          <a-col :span="5" >{{item.publishDate}}</a-col>
        </a-list-item>
    
        <!-- <a-list-item @click="showDetail(item)" slot="renderItem" :key="index" slot-scope="item, index" v-if="item.type!='file'">
          <a-list-item-meta :description="item.content | contentFilter" >
            <a slot="title" href="#">{{item.title}}</a>
            <img slot="avatar" :src="getAvatarView(item.imageHref)" style="width:220px;height:110px;"/>
          </a-list-item-meta>

          <div class="ant-list-item-content" style="margin-right: 250px">{{item.author}}</div>

          <div class="ant-list-item-content">{{item.publishDate}}</div>


        </a-list-item>
        <a-list-item @click="showDetail(item)" slot="renderItem" :key="index" slot-scope="item, index"  v-else>
          <a-list-item-meta>
            <a slot="title" :href="getFileDownloadUrl(item.fileUrl)" target="_blank">{{item.title}}</a>
            <img v-if="item.imageHref" slot="avatar" :src="getAvatarView(item.imageHref)" style="width:220px;height:110px;"/>
          </a-list-item-meta>

          <div class="ant-list-item-content" style="margin-right: 250px">{{item.author}}</div>

          <div class="ant-list-item-content">{{item.publishDate}}</div>
        </a-list-item> -->
      </a-list>
    </a-row>
  

  </a-card>


</template>

<script>
import Vue from 'vue'
import {getAction, getFileAccessHttpUrl} from '@/api/manage'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import store from '@/store'
import moment from 'moment';

export default {
  name: "EoaCmsMenuArticleModal",
  data() {
    return {
      spinLoading: false,
      listData: [],
      queryParam: {},
      pagination: {
        current: 1,
        showSizeChanger: false,
        showQuickJumper: true,
        pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
          total: 0,
          onChange: (page,pageSize) => {
            this.pageChange(page,pageSize);
          },
          onShowSizeChange:(current,pageSize) =>{
            this.pageChange(current,pageSize);
          },
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
        },
        url: {
          list:"/api/erp/workbench/article/eoaCmsArticle/list",
        },
        headers:{},
        params: {
          pageNo: 1,
          pageSize: 10,
          isPublish: '1',
          columnId: null
        },
      datepickerApplyDate:null,
      columnIdTemp: null
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"Authorization":token}
    },
    filters: {
      contentFilter(content) {
        //let reg1=/<().*?>/g;
        if(!content) return
        let reg2 = /<\/?.+?\/?>/g;
        content = content.replace(reg2, "").replace(new RegExp("&nbsp;", "gm"), '').replace(new RegExp("&darr;", "gm"), '').replace(new RegExp("&ldquo;","gm"),'').replace(new RegExp("&rdquo;","gm"),'');
        if (content.length > 100) {
          content = content.slice(0, 100) + "......"
        }
        return content;
      }
    },
    methods: {
      searchReset() {
        this.datepickerApplyDate = null;
        this.params.publishDateStart = null
        this.params.publishDateEnd = null
        this.params.title = null
        console.log('重置查询条件，类别ID为：',this.params.columnId)
        this.loadDate(this.params.columnId);
      },
      searchQuery(){
        this.loadDate(this.params.columnId)
      },
      datePickerChange(date,dateString){
        // this.params.publishDateStart = dateString[0]+" 00:00:00";
        // this.params.publishDateEnd = dateString[1]+" 23:59:59";
        if ((dateString[0] == undefined || dateString[0] == null || dateString[0] == '') || (dateString[1] == undefined || dateString[1] == null || dateString[1] == '') ){
          this.params.publishDateStart = null
          this.params.publishDateEnd = null
        }else {
          this.params.publishDateStart = moment(dateString[0]).format('YYYY-MM-DD 00:00:00');
          this.params.publishDateEnd = moment(dateString[1]).format('YYYY-MM-DD 23:59:59');
        }
        this.setFocus()
      },
      //获取焦点 ps:因为TimePicker 的获取焦点的autoFocus属性无法在组件渲染后再动态改变，所以只能手动去设置了
      setFocus() {
        this.$refs.rangePickerFocus.focus();
      },
      //失焦
      setBlur(){
        this.$refs.rangePickerFocus.blur()
      },
      resetParams(){
        this.params = {
          pageNo: 1,
          pageSize: 10,
          isPublish: '1',
          columnId: null
        }
        this.pagination = {
            current: 1,
            showSizeChanger: false,
            showQuickJumper: true
        }
      },
      getFileDownloadUrl: function (path) {
        return getFileAccessHttpUrl(path)
      },
      recordDownload(item){
        if(item.id && store.getters.userInfo.username){
          getAction("/api/erpmng/eoa/cms/eoaCmsArticleRead/recordReader", {
            articleId: item.id,
            username: store.getters.userInfo.username
          }).then((res) => {
            if (res.success) {
              console.log(res);
            }
          });
        }else{
          if(!this.item.id){
            this.$message.warning("文章信息异常");
          }else{
            this.$message.warning("登录信息异常");
          }
        }
      },
      loadDate(arg){
        console.log(arg);
        this.spinLoading=true
        this.params.columnId=arg;
        console.log('携带的查询参数为：',this.params)
        getAction(this.url.list,this.params).then((res) =>{
          console.log(res);
          if(res.success){
            let listData=res.result.records;
            this.listData=listData
            // this.pagination.total = res.result.total;
            if(res.result.total === 0){
              this.pagination = {
                  current: 1,
                  showSizeChanger: false,
                  showQuickJumper: true,
                  pageSize: 10,
                  pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
                  total: 0,
                  onChange: (page,pageSize) => {
                    this.pageChange(page,pageSize);
                  },
                  onShowSizeChange:(current,pageSize) =>{
                    this.pageChange(current,pageSize);
                  },
                  showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条"
                  },
                }
            } else {
              this.pagination = {
                // BUG#3076文章列表当有6条数据，点击切换到第二页，数据进行了切换，但一直显示为第一页
                current: this.pagination.current,
                showSizeChanger: false,
                showQuickJumper: true,
                pageSize: 10,
                pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
                total: res.result.total,
                onChange: (page,pageSize) => {
                  this.pageChange(page,pageSize);
                },
                onShowSizeChange:(current,pageSize) =>{
                  this.pageChange(current,pageSize);
                },
                showTotal: (total, range) => {
                  return range[0] + "-" + range[1] + " 共" + total + "条"
                }
              }
            }
          }
          this.spinLoading=false
        })
      },
      getAvatarView(url){
        return getFileAccessHttpUrl(url)
      },
      pageChange(page,pageSize){
        console.log(page,pageSize);
        this.pagination.current=page;
        this.pagination.pageSize=pageSize;
        this.params.pageNo=page;
        this.params.pageSize=pageSize;
        // BUG#3198分页错误
        this.loadDate(this.params.columnId);
      },
      showDetail(item){
        console.log("showDetail==>item", item);
        this.$router.push({
          path: `/oa/cms/modules/EoaCmsArticleDetailModal/${item.id}`,
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .header1{
    width: 100%;
    text-align: center;
    display: flex;
    background-color: white;
    border-bottom: 1px solid #e7eaec;
    height: 42px;
  ; border-top: 1px solid #e7eaec;
    margin-top: 10px;
  }
  a{
    color: black;
    text-align: center;
  }
  #deleteBtn{
    background-color: transparent !important;
  }
  #deleteBtn:hover{
    color: #ff4d4f !important;
    border-color: #d9d9d9 !important;
  }
  #deleteBtn:focus{
    color: #ff4d4f !important;
    border-color: #d9d9d9 !important;
  }
  //.ant-btn-primary:hover, .ant-btn-primary:focus {
  //  background-color: #FF0000;
  //  border-color: #FF0000;
  //  color: white;
  //}




  .list-container {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
  }

  .list-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #d9d9d9;
    font-weight: bold;
  }

  .list-header span {
    flex: 1;
    text-align: center;
  }

  .ant-list-item {
    padding: 8px 16px;
    border-bottom: 1px solid #d9d9d9;
  }
</style>